<template>
    <div class="vip-detail  " >
        <NavComponent type="2" title="会员卡详情"></NavComponent>
        <template v-if="card">
            <div class="card-photo">
                <img class="bg" src="/static/images/bg1.png" alt="">
                <img class="card" :src="card.cover" alt="">
            </div>
            <div class="plr15">
                <div class="c-000 fs-18 pt15">{{card.name}}</div>
                <div class="c-b5b4b4 fs-12 pt5">通用{{card.common_day}}晚   非周末{{card.work_day}}晚，周末{{card.rest_day}}晚</div>
                <div class="c-c9a35d fs-18 pt10">¥{{card.price}}</div>

                <div class="pt25" style="over-flow:hidden">
                    <div v-html="card.detail"></div>
                    <!-- <img :src="card.cover" alt=""> -->
                </div>
            </div>
            <div class="bot kitbox plr15 ptb6">
                <div class="fs-12 c-ee2f53 flex1 pt5"><span class="">总计</span><span class="fs-16 ml6">¥{{card.price}}</span></div>
                <div class="tr">
                    <van-button @click="link('/vip/add?id='+ id)" type="primary" color="#c9994a" size="small">立即开通</van-button>
                </div>
            </div>
        </template>
    </div>
</template>

<script>
import NavComponent from "@/components/nav/index";
import cardSuitApi from "@/api/api-cardSuit";
export default {
    name: "orderDetail",
    components: {
        NavComponent
    },
    data(){
        var sysInfo = wx.getSystemInfoSync()
        var pixelRatio = sysInfo.pixelRatio;
        var statusBarHeight = sysInfo.statusBarHeight;
        var top = statusBarHeight + (pixelRatio * 40 / pixelRatio)
        return {
            card: undefined,
            top
        }
    },
    onLoad(option){   
        this.id = option.id || ""
    },
    mounted() {
        this.GetCardSuit()
    },
    methods: {
        GetCardSuit(){
            cardSuitApi.GetCardSuit({
                suitId: this.id
            }).then(res => {
                res.result.price = res.result.price.toFixed(2)
                res.result.detail = this.formatDetail(res.result.detail)
                this.card = res.result
            })
        },
        getSysInfo() {
            const res = wx.getSystemInfoSync()
            return res
        },
    }
};
</script>
<style lang="scss" scope>
@import './css/detail.scss';
</style>
